<template>
	
	<view class="exampage">
		<view class="shijian">
			<u-count-down :time="60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
		</view>
		 <div class="content">
			 <div class="content-body" v-for="(item,index) in this.list.testpaper_questions" :key="index">
				 <view class="top" v-if="active==index">
				 	<div class="left">{{switchitem(item.type)}}</div>
				 	<div class="right">{{active+1}}</div>
				 </view>
				 <div class="content-item" v-if="active==index">
				 	<span class="header" v-html="item.title"></span>
					<div class="header" v-html="item.remark"></div>
					<!-- 填空题 -->
				     <u--textarea  v-model="value1" placeholder="请输入内容" v-if="item.type=='completion'"></u--textarea>
				 	<u-button type="primary" text="添加填空" v-if="item.type=='completion'" @click="addtext"></u-button>
					<!-- 问答题 -->
					
					<u--textarea  v-model="value2" placeholder="请输入内容" v-if="item.type=='answer'"></u--textarea>
					<u-button type="primary" text="添加填空" v-if="item.type=='answer'" @click="addtext"></u-button>
					
					<!-- //多选 -->
						<checkbox-group v-if="item.type=='checkbox'" >
								<label v-for="(t, i) in item.options" :key="i" >
								<checkbox :value="t" @click="change(i)"/><span v-html="t"></span>
						</label>
						</checkbox-group>
						<!-- //单选判断 -->
						<evan-radio v-if="item.type=='trueOrfalse'" v-model="baseValue" :label="n" v-for="(n, y) in item.options"  :key="n" @change="radio(y)"> 
						     <span v-html="n"></span></evan-radio>
						<evan-radio v-if="item.type=='radio'" v-model="baseValue1" :label="n" v-for="(n, y) in item.options"  :key="n" @change="trueOrfalse(y)">
						     <span v-html="n"></span></evan-radio>
				 </div>
			 </div>
			
		 </div>
		 <div class="footer">
			<span class="iconfont icon-zuojiantou" @click="zuo"></span>
			<span>{{active+1}}/{{this.list.testpaper_questions.length}}</span>
			<span @click="jiaojuan">交卷</span>
			<span class="iconfont icon-youjiantou" @click="you"></span>
		 </div>
	</view>
</template>

<script>
	import {getTestpaperRead,getsave} from '../request/index.js'
	export default {
		data() {
			return {
				checkboxValue1:[],
				baseValue:"",
				baseValue1:'',
				list:[],
				active:0,
				value1: '',
				value2:'',
				aa:{
					answer:"问答题",
					radio:"单选题",
					trueOrfalse:"判断题",
					completion:'填空题',
					checkbox:'多选题'
				},
				mock:[
					{
						id: 403,
						question_id: 417,
						remark: "",
						score: 0,
						title: "<p>请问1+1为什么等于2</p>",
						type: "completion"
					},
					{
						id: 404,
						question_id: 416,
						remark: "",
						score: 0,
						title: "<p>1+1=</p>",
						type: "completion"
					},
					{
						id: 405,
						options:[
							 "正确",
							 "错误"
						],
						question_id: 415,
						remark: "",
						score: 0,
						title: "<p>1+1=1</p>",
						type: "trueOrfalse"
					},
					{
						id: 406,
						options:[
							 "<p>1</p>",
							 "<p>2</p>",
							 "<p>3</p>"
						],
						question_id: 414,
						remark: "",
						score: 0,
						title: "<p>1+1=</p>",
						type: "radio"
					},
					{
						id: 393,
						options: [
							 "<p>多选1</p>",
							 "<p>多选2</p>",
							 "<p>多选3</p>"
						],
						question_id: 413,
						remark: "",
						score: 1,
						title: "多选2",
						type: "checkbox"
					}
				],
				trueOrfalse1:null,
				change1:[],
				jiaojuan1:[]
			}
		},
		methods: {
			//判断
			trueOrfalse(i){
				this.trueOrfalse1=i
				console.log(this.trueOrfalse1);
			},
			//多选
			change(i){
				this.change1.push(i)
				console.log(this.change1);
			},
			//交卷
			jiaojuan(){
				let answer=[],completion=[]
				answer.push(this.value1)
				completion.push(this.value2)
				this.jiaojuan1.push(answer,completion,this.trueOrfalse1,this.change1)
				// console.log(this.jiaojuan1);
				// console.log(answer,'answer');
				// console.log(completion,'completion');
				// console.log(this.trueOrfalse1,'trueOrfalse');
				// console.log(this.change1,'change');
				getsave({user_test_id:this.list.user_test_id,value:this.jiaojuan1}).then(res=>{
					console.log(111);
				})
				
			},
			you(){
				this.active+=1
				// if(this.active>this.list.length){
				// 	this.active=this.list.length-1
				// }
			},
			zuo(){
				this.active-=1
				if(this.active<1){
					this.active=0
				}
			},
			addtext(){
				
			},
			switchitem(e){
				switch (e){
					case "answer":
							return "问答题"
						break;
					case "radio":
							return  "单选题"
						break;
					case "trueOrfalse":
						    return "判断题"
					    break;
					case "completion":
							return "填空题"
						break;
					case "checkbox":
							return "多选题"
						break;
					default:
						break;
				}
			}
		},
		onLoad(options) {
			console.log(options);
			// 
			getTestpaperRead({id:options.id}).then(res=>{
				this.list=res.data.data
				console.log(this.list);
				if(res.statusCode==400){
					console.log(1111);
					uni.showToast({
						icon:'error',
						title:res.data.data
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:`/pages/examination/examination?check=false`
						})
					},1000)
				}
			})
		}
	}
</script>

<style lang="scss">
.exampage{
	width: 100%;
	height: 100%;
	position: absolute;
	.shijian{
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-top: 1px solid red;
		border-bottom: 1px solid red;
		box-sizing: border-box;
		padding-top: 10px;
	}
	.top{
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20px;
	}
	.content{
		width: 100%;
		height: calc(100% - 100px);
		.content-body{
			width: 100%;
		}
		.content-item{
			width: 100%;
			height: 400px;
			p{
				width: 100%;
				height: 50px;
				line-height: 50px;
				border: 1px solid #000;
				margin-top: 10px;
			}
		}
		// display: none;
		.active{
			display: block;
		}
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20px;
	}
}
</style>
